<template>
  <el-dialog
    title="事件详情更新"
    :model-value="visible"
    width="400px"
    @close="handleClose"
    @update:model-value="updateVisible"
  >
    <el-form :model="eventForm" ref="formRef" label-width="100px">
      <el-form-item label="事件编号">
        <el-input v-model="eventForm.eventId" placeholder="请输入事件编号" />
      </el-form-item>
      <el-form-item label="事件类型">
        <el-input v-model="eventForm.eventType" placeholder="请输入事件类型" />
      </el-form-item>
      <el-form-item label="事件受理人">
        <el-input v-model="eventForm.handler" placeholder="请输入事件受理人" />
      </el-form-item>
      <el-form-item label="发生时间">
        <el-date-picker v-model="eventForm.eventTime" type="datetime" placeholder="选择发生时间" />
      </el-form-item>
      <el-form-item label="发生地点">
        <el-input v-model="eventForm.location" placeholder="请输入发生地点" />
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="eventForm.licensePlate" placeholder="请输入车牌号" />
      </el-form-item>
      <el-form-item label="报警员">
        <el-input v-model="eventForm.reporter" placeholder="请输入报警员" />
      </el-form-item>
      <el-form-item label="处理状态">
        <el-select v-model="eventForm.status" placeholder="请选择处理状态">
          <el-option label="待处理" value="pending" />
          <el-option label="处理中" value="inProgress" />
          <el-option label="已处理" value="completed" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm">更新</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, watch } from 'vue'

// 接收父组件的 visible 属性
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
})

const emit = defineEmits(['close', 'update:visible'])

// 响应式数据：表单的可编辑数据
const eventForm = ref({
  eventId: '',
  eventType: '',
  handler: '',
  eventTime: '',
  location: '',
  licensePlate: '',
  reporter: '',
  status: '',
})

// 监听父组件传来的 visible，防止双向绑定冲突
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      // 可以在这里做一些初始化操作，比如加载事件数据
    }
  },
)

// 提交表单
function submitForm() {
  // 处理更新事件的逻辑
  console.log('更新事件：', eventForm.value)
  handleClose() // 提交后关闭弹窗
}

// 关闭弹窗
function handleClose() {
  emit('close') // 触发父组件的 close 事件
}

// 更新 visible 的状态（同步）
function updateVisible(value) {
  emit('update:visible', value)
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.el-form {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>
